<template>
<div>
 <el-row >
      <el-row class="search-row">
        <el-col :span="12">
          <el-input placeholder="用户名" size="small" v-model="search.username">
            <el-button slot="append" icon="el-icon-search" @click="searchUser()"></el-button>
          </el-input>
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button type="primary" icon="el-icon-plus" size="small"
            v-show="permission.add" @click="handleCreateUser()">添加</el-button>
        </el-col>
      </el-row>
 </el-row>


  <el-table
    :data="tableData"
    border
    style="width: 100%">

 <el-table-column
      prop="id"
      label="序号"
      width="120">
    </el-table-column>

    <el-table-column
      prop="name"
      label="题目名称"
      width="120">
    </el-table-column>

    <el-table-column
      prop="type"
      label="题目类型"
      width="120">
    </el-table-column>

    <el-table-column
      prop="gender"
      label="使用性别"
      width="300">
    </el-table-column>
    <el-table-column
      prop="required"
      label="是否必填"
      width="120">
    </el-table-column>

    <el-table-column

      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button type="" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="" size="small" @click="delEmpById(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>


 <!-- 修改弹框 -->
         <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
          <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
          <el-form ref="form" :model="form">

            <el-form-item label="序号"  :label-width="formLabelWidth">
              <el-input v-model="form.empNum" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="题目名称" :label-width="formLabelWidth">
              <el-input v-model="form.empName" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="题目类型" :label-width="formLabelWidth">
              <el-input v-model="form.gender" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="使用性别" :label-width="formLabelWidth">
              <el-input v-model="form.birthday" auto-complete="off"></el-input>
            </el-form-item>

            <el-form-item label="是否必填" :label-width="formLabelWidth">
              <el-input v-model="form.phone" auto-complete="off"></el-input>
            </el-form-item>

          </el-form>
          <div slot="footer"  class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <!-- 设置触发更新的方法 -->
            <el-button type="submit" @click="update">确定</el-button>
          </div>
        </el-dialog>
</div>
</template>

<script>
import {question} from '@/api/question.js'

export default {
  data(){
    return{
        tableData:[],
      // currentPage:1,
      permission: {
        add: true,
        edit: false,
        remove: false
      },
      // userTotal: 0,
      search: {
        isadd:false,
        username: "",
        sort: "",
        offset: 0,
        limit: 10,
        currentPage: 1
      },
      dialogFormVisible: false,
                formLabelWidth: "80px",
              // 设置form用于进行添加的时候绑定值
               form: {
               empNum:'',
               phone:'',
               empName:'',
               birthday:'',
               duty:'',
               address:'',
               currentIndex: '',
               dept:{
                 id:"",
                 deptName:""
               }
               },
    }
  },
    methods:{
         async pageInit(){
        try{
          let [res] =await Promise.all([
            question()
          ])

          console.log(res.data)
            this.tableData=res.data
        }catch(error){
            console.log(error);
        }

          },
           async delEmpById(index,row){
        console.log(row.id)

          let [deled] =await Promise.all([
            del(row.id)
          ])
            this.pageInit();
            this.dialogFormVisible = false;
      },



   async update() {

         if(this.isadd=false){
      try{
          let [upded] =await Promise.all([
            upd(this.form)
          ])


        }catch(error){
            console.log(error);
        }

         }else{
           console.log(this.form)
          let [added] =await Promise.all([
            add(this.form)
          ])

         }

              this.pageInit();
            this.dialogFormVisible = false;
     },
     cancel() {
      // 取消的时候直接设置对话框不可见即可
      this.dialogFormVisible = false;
    }
    ,
    handleEdit(index, row) {
        // console.log(index)
               // 将数据的index传递过来用于实现数据的回显
               this.form = this.tableData[index];
                this.currentIndex = index;

                this.row=row
                // 设置对话框的可见
                this.dialogFormVisible = true;
          },

    handleSizeChange(val) {
            this.search.limit = val;
             this.search.offset = (this.search.currentPage - 1) * val
              //  this.searchUser()
    },
    handleCurrentChange(val) {
      this.search.offset = (val - 1) * this.search.limit
      this.search.currentPage = val
      // this.searchUser()
    }
    },
    created(){
      this.pageInit()
    }
}
</script>

<style>

</style>
